<template>
  <div style="height: 220px; width: 100%" ref="pieRef"></div>
</template>
<script setup lang="tsx">
import * as echarts from 'echarts';
import { ref, onMounted, watch, reactive, nextTick } from 'vue';

const pieRef = ref<HTMLElement>();
const props = defineProps({
  result: {
    type: Array,
    default: [],
  },
});
watch(props, (nval) => {
  sju();
  chartOption();
});
const chart = ref<echarts.ECharts>();
onMounted(() => {
  chart.value = echarts.init(pieRef.value!);
});
let num: any = [];
let name: any = [];
let charts = reactive({
  // 按顺序排列从大到小
  cityList: [],
  cityData: [],
  cityData2: [] as number[],
});
let lineY: any = reactive([]);
const sju = () => {
  props.result.sort((a, b) => b.count - a.count);
  props.result.forEach((item) => {
    num.push(item.count);
    name.push(item.name);
  });
  charts.cityData2 = [...num].sort((a, b) => a - b);
  charts.cityList = num;
  charts.cityData = name;
  for (let i = 0; i < charts.cityList.length; i++) {
    let data = {
      name: charts.cityData[i],
      color: 'rgba(248,195,248' + ')',
      value: charts.cityList[i],
      itemStyle: {
        show: true,
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          1,
          0,
          [
            {
              offset: 0,
              color: 'rgba(47, 142, 240, 1)',
            },
            {
              offset: 1,
              color: 'rgba(47, 142, 240,.4 )',
            },
          ],
          false,
        ),
        borderRadius: 10,
        shadowBlur: 15,
        shadowColor: 'rgba(0, 0, 0, 0.1)',
      },
    };
    lineY.push(data);
  }
};
const chartOption = () =>

  chart?.value.setOption({
    title: {
      show: false,
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      borderWidth: 0,
      top: '1%',
      left: '3%',
      right: '15%',
      bottom: '3%',
    },
    color: 'rgba(248,195,248',
    yAxis: [
      {
        type: 'category',
        inverse: true,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          inside: false,
        },
        data: charts.cityList,
      },
      {
        type: 'category',
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          inside: false,
          color: '#000',
          fontSize: '14',
          fontFamily: 'PingFangSC-Regular',
          formatter: function (val) {
            return `${val}支`;
          },
        },
        splitArea: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        data: charts.cityData2,
      },
    ],
    xAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
    },
    series: [
      {
        name: '',
        type: 'bar',
        zlevel: 2,
        barWidth: '20px',
        data: lineY,
        animationDuration: 1500,
        label: {
          color: '#000',
          show: true,
          position: ['5px', '24px'],
          fontSize: 16,
          formatter: function (a) {
            return a.name;
          },
        },
      },
    ],
  });
nextTick(() => {
  chart?.value.resize()
})
</script>
<style lang="less" scoped></style>
